<template>
    <div class="container">
        <div class="warp">
            <div class="header">
                <div class="pic">
                    <img v-if="SongListInfo.pic" :src="SongListInfo.pic">
                    <img v-else src="@/assets/13.jpg">
                </div>
                <div class="content">
                    <div style="display: flex; justify-content: space-between;">
                        <div style="display: flex;">
                            <div>
                                <el-tag style="font-size: 25px;">歌单</el-tag>
                                <span class="title1">{{SongListInfo.title}}</span>
                            </div>
                            <div>
                                <span v-if="false" class="el-icon-star-off" style="font-size: 50px;"></span>
                                <span v-else class="el-icon-star-on" style="font-size: 40px;"></span>
                            </div>
                        </div>
                        <div>
                            <el-button v-if="user.id == SongListInfo.listUserid">编辑歌单</el-button>
                        </div>
                    </div>
                    <div class="authorinfo" style="margin:10px 0;">
                        <span class="el-icon-s-custom" style="font-size: 20px;"></span>
                        <span style="margin: 0 20px ;font-size: 20px;">{{SongListUser.username}}</span>
                        <span>{{SongListInfo.createTime}}</span><span>创建</span>
                    </div>
                    <div class="biaoqian">
                        <el-tag style="font-size: 18px;" type="success">标签</el-tag>
                        <span style="font-size: 16px; margin-left: 15px;" v-for="(item,index) in tags" :key="index">{{ item.name }}</span>
                    </div>
                    <div class="songtotal" style="margin: 10px 0;">
                        <span style="font-size: 20px;">歌曲</span>
                        <span style="margin: 0 10px;" v-if="this.songTotal">{{ this.songTotal }}</span>
                    </div>
                    <div class="introduce" style="margin-top: 10px; width: 100%;">
                        <span style="font-size: 20px;">简介：</span>
                        <span>{{SongListInfo.introduce}}</span>
                    </div>
                </div>
            </div>

            <div class="middle">
                <ul>
                    <li @click="title=1">歌曲列表</li>
                    <li @click="title=2">评论</li>
                </ul>
                <div class="box" style="height: 100%; box-sizing: border-box;">
                    <div v-if="title == 1" style="padding: 0 auto;">
                        <songlist :tableData="tableData"></songlist>
                    </div>
                    <div v-else>
                        <div class="title1">
                            <h2>评论</h2>
                        </div>
                        <div class="MidComm">
                            <textarea placeholder="评论内容" rows="10" v-model="content">
                            </textarea>
                            <el-button type="success" style="position: absolute;right: 10px;bottom: 10px;"
                            @click="SubmitComment()">评论</el-button>
                        </div>
                        <div style="margin-bottom: 20px;">
                            <Comment :isShow="isShow" v-model="replyComment" @subComment="subComment"
                            :dataComment="dataComment" @deleteComment="deleteComment"
                            @SubmitComment="SubmitComment"></Comment>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import songlist from '@/components/Front/SongList/index.vue'
import Comment from '@/components/Comment/index.vue'
import { mapState } from 'vuex'
export default {
    components:{
        songlist,
        Comment
    },
    data(){
        return {
            SongListUser:'',
            tableData:[],
            name:'',
            title:1,
            SongListInfo:'',
            tags:[],
            songTotal:'',
            user:JSON.parse(localStorage.getItem('honey-user') || '{}'),
            Comment:{
                parentId:'',
                rootId:'',
                content:'',
                userId:'',
                id:'',
                commType:1,
                commTargetId:'',
                toCommUserId:''
            },
            content:'',
            replyComment:'',
            dataComment:[],
            isShow:-5,
        }
    },
    methods:{
        async getSongListUser(){
            console.log(this.SongListInfo.listUserid)
            const res = await this.$axios.get(`User/SelectById/${this.SongListInfo.listUserid}`)
            console.log(this.SongListInfo.id)
            this.songTotal = await this.$axios.get(`ListSong/GetSongTotal/${this.SongListInfo.id}`)
            this.SongListUser = res
        },
        async getBiaoqian(){
            const res = await this.$axios.post(`tagMap/SelectListTag?targetType=0&targetId=${this.SongListInfo.id}`)
            console.log(res)
            for(let i=0;i<res.length;i++){
                this.tags.push(res[i].tagsList[0])
            }
        },
        async getSong(){
            const res = await this.$axios.get(`SongList/getSongListSong/${this.SongListInfo.id}`)
            console.log("popo[axopxaopxa]")
            console.log(res)
            this.tableData = res
        },
        async SubmitComment(){
            this.Comment.commType = 2
            this.Comment.commTargetId = this.baseDate.id
            if(this.replyComment == '' || this.replyComment == null){
                this.Comment.content = this.content
            }
            else{
                this.Comment.content = this.replyComment
            }
            const res = await this.$axios.post("Comment/SaveComment",this.Comment)
            console.log("res="+res)
            if(res.code == "200"){
                this.$message.success(res.msg)
            }
            else{
                this.$message.error(res.msg)
            }
            this.replyComment = ''
            this.content = ''
            this.isShow = -5
            Object.keys(this.Comment).forEach(key => (this.Comment[key] = ''))
            this.getComment()
        },

        async deleteComment(val){
            this.Comment.commType = 2
            this.Comment.content = val.content
            this.Comment.id = val.id
            this.Comment.rootId = val.rootId
            this.Comment.parentId = val.parentId
            this.Comment.commTargetId = this.baseDate.id
            const res = await this.$axios.post("Comment/DeleteComment",this.Comment)
            if(res.code == "200"){
                this.$message.success(res.msg)
                this.getComment()
            }
            else{
                this.$message.error("删除失败")
            }
        },

        subComment(obj){
            if(this.isShow != -5){
                this.replyComment = ''
                this.isShow = -5
                this.Comment.rootId = ''
                this.Comment.parentId = '',
                this.Comment.content = '',
                this.Comment.id = ''
                this.Comment.userId = '',
                this.toCommUserId = ''
                return
            }
            else{
                if(obj.rootId == -1){
                    this.isShow = obj.id
                    this.Comment.rootId = obj.id
                }
                else{
                    this.isShow = obj.rootId
                    this.Comment.rootId = obj.rootId
                }
                this.Comment.parentId = obj.id
                this.Comment.toCommUserId = obj.userId
            }
        },
        async getComment(){
            const res = await this.$axios.post(`Comment/getAllComment?commType=2&commTargetId=${this.baseDate.id}`)
            this.dataComment = res
        }
    },
    created(){
        this.SongListInfo = this.baseDate
        this.getSongListUser()
        this.getBiaoqian()
        this.getSong()
        this.getComment()
    },
    computed:{
        ...mapState('editfo',['baseDate'])
    }
}
</script>

<style lang="less" scoped>
.container{
    width: 100%;
    height: 100%;
    margin-top: 90px;
    background-color: #eee;

}
.container .warp{
    margin: 0 100px;
    height: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.warp .header{
    display: flex;
    padding: 10px 0;
    margin: 0 20px;
    .pic{
        margin: 0 20px 0 50px;
        height: 220px;
        width: 220px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.content{
    width: calc(100% - 220px);
    margin-right: 50px;
    .title1{
        font-weight: 400;
        font-size: 25px;
        margin:0 20px;
    }
}

.warp .middle{
    margin-top: 20px;
    height: 100%;
    width: 100%;
    ul{
        display: flex;
        height: 30px;
        li{
            height: 30px;
            width: 140px;
            text-align: center;
            font-size: 22px;
            margin-left: 10px;
            &:hover{
                cursor: pointer;
                border-bottom: 3px solid #DC143C;
            }
        }
    }
}
.box{
    padding: 0 80px;
}
.middle .title1{
    margin-top: 30px;
}

.MidComm{
    position: relative;
    padding: 20px;
    border-radius: 5px;
    height: 200px;
    background-color: #f5f5f5;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.6);
    textarea{
        height: 100%;
        width: 100%;
        border: none;
        resize: none;
        background-color: transparent;
        &:focus{
            outline: none;
        }
    }
    textarea::-webkit-input-placeholder{
        font-size: 20px;
    }
}
</style>